body {
    font-family: "Segoe UI light";
    padding:0;
    margin:0;
}

header {
    padding:20px 0 0 30px;
}

ul { 
    list-style: square outside; 
    margin:0;
    padding:0;

}


.clear-all {
    clear:both;
}

#scheduleContainer {
    display:none;
    margin-left:30px;
    margin-top:20px;
    border:0px solid red;
    width:100%;
    overflow-x:scroll;
}

.schedule-frame {
    width:2310px;

}

.copper-title {
    font-size:42px;
    color:white;   
}

/*---------- to to list begin  ------------*/
#toDoList {
    position:absolute;
    right:600px;
    top:100px;
    z-index:1000;
    width:350px;
    display:none;
}

.copper-todo-frame {
    border-radius:10px;
    background:white;  
    padding-top:10px;
    
}
.copper-todo-header {
    border-bottom:1px solid #666666;
    padding: 10px;
    cursor:move;
}
.copper-todo-body {
    height:450px;
    position:relative;  
    width:100%;
    overflow-y:auto;
    list-style:square inside;
    cursor:pointer;
}
.copper-todo-body ul {
    
}
.copper-todo-item, .copper-todo-selected{
    padding-left:20px;
    padding-right:10px;
    margin-bottom:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    height:80px;  
    color:#656565;   
}
.copper-todo-selected {
    background:#FFFFA7;
    color:#000;
    box-shadow: 0 0 10px #333;   
}
.copper-todo-footer {
    border-top:1px solid #666666;
    padding: 10px;
}
.copper-todo-previous, .copper-todo-next {
    width:100px;
    cursor:pointer;
}
.copper-todo-previous {
    float:left;
}
.copper-todo-next {
    float:right;
    text-align:right;
}
.copper-todo-index {
    text-align:center;
}

.copper-todo-pinch {
    width:30px;
    height:20px;
    background:gray;
    cursor:ns-resize;
    margin:auto;
}

.copper-todo-delete {
    width:26px;
    height:26px;
    background:url(../image/delete.png);
    position:absolute;
    z-index:1001;
    display:none;
}
.copper-todo-time {
    color:white;
}
.copper-todo-selected .copper-todo-time {
    color:#00BBE3;
} 

/*---------- to to list end  ------------*/
.copper-schedule-page {
    1display:inline-block;
    float:left;
    width:310px;
    border-radius:10px;
    background:transparent;
    padding:10px;
}
.copper-schedule-page:hover {
    background:rgba(255,255,255,0.2);
}

.copper-drag-dummy {
    width:50px;
    height:10px;
    border:1px solid silver;
    background:gray;
    z-index:10001;
    position:absolute;
    display:none;
    cursor:move;
}

.copper-insert-dummy {
    margin-bottom:10px;
    height:80px;
    border:1px dotted gray;
}



/*----------------  form begin -------------------*/
#formContainer {
    display:-moz-box;
    display:-webkit-box;
    display: box;
    
    position:absolute;
    z-index:10001;
    top:0;
    left:0;
    width:100%;   
    height:280px;
    background:rgba(0,0,0,0.7);
    color:white;
    padding:10px;
}

.form-title { 
    width:240px;

    font-size:32px;
}
.form-body { 
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1; 
    1-ms-flex:1;
    width:800px;
    display: flex;
    display:-moz-box;
    display:-webkit-box;
    display:-ms-flexbox;

    -moz-box-pack: center;
    -webkit-box-pack: center;
    box-pack: center;
    -ms-flex-pack: center;
}
.form-body form {
    width:600px;
}

.form-tail {
    width:200px;
    text-align:right;
    padding: 20px 10px 0 0;
}

#formContainer table {
    margin:auto;
    color:white;
    font-family: "Segoe UI light";
}

.input-group {
    margin-bottom:18px;
}

.input-label {
    float:left;
    width:140px;
    text-align:right;
    display:block;
}

.input-ct {
    display:inline-block;
    padding-left:20px;
}
/*----------------  form end -------------------*/